<template>
    <div>
        <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
            <div :class="textCss">
                <template v-if="svalue.join != undefined">
                    <template v-for="(option,i) in svalue ">
                        <el-tag size="small" type="info" class="tag_label" >{{option}}</el-tag>
                    </template>
                </template>
                <template v-else>{{svalue}}</template>
            </div>
            
        </el-form-item>
    </div>
</template>


<script>

import TextView from "./TextView";

/**
 * 单选框和复选框的view组件
 * 
 */
export default {
    extends: TextView,
    name: "PopoRadioChkView",
    computed:{
        svalue(){
            if( this.mvalue === null || this.mvalue === undefined){
                this.textCss[ "null-value"] = true;
                return this.nullValue;
            }

            var options = this.item.options ;
            // var values = Array.isArray( this.mvalue) ? this.mvalue : this.mvalue.split( this.item.valueSplitChar || ",");
            var values = Array.isArray( this.mvalue) ? this.mvalue : [ this.mvalue];

            var mvalue = options.map( (item) => {
                return values.indexOf( item.value) >= 0 ? item.label : null;
            });

            mvalue = mvalue.filter( (item) => { return item != null});
            return mvalue;
        },
    },
    created(){
    },
    methods: {
    }
};
</script>

<style scoped lang="scss">
@import "../../css/view_base";

.el-icon-time-view-style{
    color: #C0C4CC;
}

.tag_label{
    margin-right: 3px;
}
</style>